<template>
<!--  //展示消息内容-->
  <div id="show_infos" style="width: 720px;height: 490px;overflow-y: scroll;padding-top: 20px" >
    <button @click="test()">we</button>
    <div v-for="message in messages">
      <div v-if="selectedUser.userId==message.fromUser" class="chat-sender">
        <div><img src="./test.jpg"></div>
        <div>{{getName(message.fromUser)}}</div>
        <div style="width: auto;max-width: 200px;min-width: 0px">
          <div class="chat-left_triangle"></div>
          <span>{{message.msg}}</span>
        </div>
      </div>
      <!--          <div class="chat-notice">-->
      <!--            <span>2017年12月10日 23:13</span>-->
      <!--          </div>-->
      <!-- Right -->
      <div  v-if="currentUser.userId!=message.toUser" class="chat-receiver">
        <div><img src="./test.jpg"></div>
        <div>{{currentUser.userName}}</div>
        <div style="width: auto;max-width: 200px">
          <div class="chat-right_triangle"></div>
          <span>{{message.msg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'messageList',
    //添加update方法：
    // updated : function(){
    //   this.$nextTick(function(){
    //     var div = document.getElementById('show_infos');
    //     div.scrollTop = div.scrollHeight;
    //   })
    // },
    props:{
      messages:{
      },
      selectedUser:{},
      currentUser:{},
  },
    methods:{
      test(){
      }
    }
  }
</script>

<style scoped>

</style>
